import { logout } from "@/common";
import axios, { AxiosResponse } from "axios";
import { ElMessage } from "element-plus";

const instance = axios.create({
  baseURL: "/api",
  timeout: 5000,
});

instance.interceptors.request.use(
  (config) => {
    let token = localStorage.getItem("token");
    if (token) {
      config.headers = config.headers || {};
      config.headers.Authorization = token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  // (response: AxiosResponse<MyResponse<any>,any>):any => {
  (response) => {
    let data = response.data as MyResponse<any>;
    // if(response.data.code !== 200) {
    if (data.code !== 200) {
      // 弹出提示
      // ElMessage.error(response.data.message);
      ElMessage.error(data.message);
    }

    // 如果是token失效
    if (data.code === 401) {
      logout();
    }

    return response.data;
  },
  (error) => {
    // error 里面的错误可能为英文，对用户体验不好，自己把错误先存起来(locaStorage)
    if (error.code !== "ERR_CANCELED") {
      ElMessage.error("出错了，请联系管理员");
    }
    localStorage.setItem("neterr", error.message);
    return Promise.reject(error);
  }
);

export default instance;

// 为什么 在请求之后 的 .then 里面 ，res 自动识别为  AxiosResponse
// Promise 的 .then 里面的参数 由谁决定？ 由Pormise在创建里传入的泛型决定
// let p = new Promise<AxiosResponse>((resolve,reject)=>{
//   resolve('abc')
// })

// p.then(res=>{
//   console.log(res);
// })
